<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <html>

        <head>
            <title>图书馆首页</title>
            <link rel="shortcut icon" href="img/library.ico" />
            <link rel="stylesheet" href="css/bootstrap.min.css">
            <script src="js/jquery-3.2.1.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/js.cookie.js"></script>
            <style>
                body {
                    min-height: 100vh;
                    margin: 0;
                    padding: 0;
                    width: 100vw;
                    height: 100vh;
                    /* 背景图 */
                    background: url('img/log_bg.jpg') no-repeat center center fixed;
                    background-size: cover;
                    position: relative;
                }

                /* 半透明遮罩 */
                body::before {
                    content: '';
                    position: fixed;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(255, 255, 255, 0.55);
                    z-index: 0;
                    pointer-events: none;
                }

                .center-box {
                    min-height: 100vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    z-index: 1;
                }

                .login-card {
                    background: #fff;
                    border-radius: 22px;
                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
                    padding: 40px 32px 32px 32px;
                    max-width: 370px;
                    width: 100%;
                    margin: 0 auto;
                    position: relative;
                    animation: fadeIn 1s;
                }

                .login-title {
                    font-size: 2.2rem;
                    font-weight: bold;
                    color: #3a3a3a;
                    text-align: center;
                    margin-bottom: 1.5rem;
                    letter-spacing: 2px;
                }

                .form-label {
                    font-weight: 500;
                    color: #555;
                }

                .form-control:focus {
                    border-color: #74ebd5;
                    box-shadow: 0 0 0 2px #74ebd540;
                }

                .btn-primary {
                    background: linear-gradient(90deg, #74ebd5 0%, #ACB6E5 100%);
                    border: none;
                    font-weight: bold;
                    letter-spacing: 1px;
                    transition: background 0.3s;
                }

                .btn-primary:hover {
                    background: linear-gradient(90deg, #ACB6E5 0%, #74ebd5 100%);
                }

                .btn-outline-primary {
                    border-color: #74ebd5;
                    color: #74ebd5;
                    font-weight: bold;
                }

                .btn-outline-primary:hover {
                    background: #74ebd5;
                    color: #fff;
                }

                .login-logo {
                    display: block;
                    margin: 0 auto 18px auto;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    box-shadow: 0 2px 8px #74ebd540;
                    object-fit: cover;
                }

                @media (max-width: 500px) {
                    .login-card {
                        padding: 24px 8px 18px 8px;
                    }

                    .login-title {
                        font-size: 1.5rem;
                    }
                }

                @keyframes fadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            </style>
        </head>

        <body>
            <c:if test="${!empty error}">
                <script>
                    alert("${error}");
                    window.location.href = "login.html";
                </script>
            </c:if>
            <div class="center-box">
                <div class="login-card">
                    <img src="img/logo.png" class="login-logo" alt="logo">
                    <div class="login-title">图书馆登录</div>
                    <form id="loginForm" autocomplete="off">
                        <div class="mb-3">
                            <label for="id" class="form-label">账号</label>
                            <input type="text" class="form-control" id="id" placeholder="请输入账号">
                        </div>
                        <div class="mb-3">
                            <label for="passwd" class="form-label">密码</label>
                            <input type="password" class="form-control" id="passwd" placeholder="请输入密码">
                        </div>
                        <div class="mb-3">
                            <label for="yzm" class="form-label">验证码</label>
                            <input type="text" class="form-control" id="yzm" placeholder="请输入验证码">
                            <div class="text-center mt-2">
                                <img id="image" src="/image.html" title="点击更换图片"
                                    style="cursor:pointer;max-width:120px;height:38px;object-fit:cover;display:inline-block;"
                                    onclick="refresh()">
                            </div>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="remember">
                            <label class="form-check-label" for="remember">记住密码</label>
                        </div>
                        <div id="info" class="text-danger mb-2" style="min-height: 22px;"></div>
                        <div class="text-center mt-3">
                            <button type="button" id="loginButton" class="btn btn-primary mb-2 mx-auto d-block"
                                style="min-width:140px;max-width:240px;width:80%;">登录</button>
                            <button type="button" id="registeredButton" class="btn btn-outline-primary mx-auto d-block"
                                style="min-width:140px;max-width:240px;width:80%;">注册</button>
                        </div>
                    </form>
                </div>
            </div>
            <script>
                //  var yzm1="${sessionScope.code}"
                //  console.log(yzm1);
                function refresh() {
                    //IE存在缓存,需要new Date()实现更换路径的作用
                    document.getElementById("image").src = "../image.html?" + new Date();
                }
                $("#id").keyup(
                    function () {
                        if (isNaN($("#id").val())) {
                            $("#info").text("提示:账号只能为数字");
                        }
                        else {
                            $("#info").text("");
                        }
                    }
                )
                // 记住登录信息
                function rememberLogin(username, password, checked) {
                    Cookies.set('loginStatus', {
                        username: username,
                        password: password,
                        remember: checked
                    }, { expires: 30, path: '' })
                }
                // 若选择记住登录信息，则进入页面时设置登录信息
                function setLoginStatus() {
                    var loginStatusText = Cookies.get('loginStatus')
                    if (loginStatusText) {
                        var loginStatus
                        try {
                            loginStatus = JSON.parse(loginStatusText);
                            $('#id').val(loginStatus.username);
                            $('#passwd').val(loginStatus.password);
                            $("#remember").prop('checked', true);
                        } catch (__) { }
                    }
                }

                // 设置登录信息
                setLoginStatus();
                $("#loginButton").click(function () {
                    var id = $("#id").val();
                    var passwd = $("#passwd").val();
                    var yzm = $("#yzm").val();
                    var remember = $("#remember").prop('checked');
                    if (id == '') {
                        alert("提示:账号不能为空");
                    }
                    else if (passwd == '') {
                        alert("提示:密码不能为空");
                    }
                    else if (isNaN(id)) {
                        alert("提示:账号必须为数字");
                    }
                    else if (yzm == '') {
                        alert("提示:验证码不能为空");
                    }
                    else {
                        $.ajax({
                            type: "POST",
                            url: "/api/loginCheck",
                            data: {
                                id: id,
                                passwd: passwd,
                                yzm: yzm
                            },
                            dataType: "json",
                            success: function (data) {
                                if (data.stateCode.trim() === "0") {
                                    alert("提示:账号或密码错误！");
                                } else if (data.stateCode.trim() === "1") {
                                    $("#info").text("提示:登陆成功，跳转中...");
                                    window.location.href = "/admin_main.html";
                                } else if (data.stateCode.trim() === "2") {
                                    if (remember) {
                                        rememberLogin(id, passwd, remember);
                                    } else {
                                        Cookies.remove('loginStatus');
                                    }
                                    $("#info").text("提示:登陆成功，跳转中...");
                                    window.location.href = "/reader_main.html";
                                } else if (data.stateCode.trim() === "3") {
                                    alert("提示:验证码错误！(区分大小写)");
                                }
                            }
                        });
                    }
                })
                $("#registeredButton").click(function () {
                    window.location.href = "/reader1_add.html";
                })
            </script>
        </body>

        </html>